<template>
	<view class="box">
		<view class="my-top-box">
			<view class="my-top">
				<view class="img">
					<image
						src="https://img2.baidu.com/it/u=3450582472,3268356818&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=29be9121075f661d4dd2bdd7ffebb9d9"
						mode=""></image>
				</view>
				<view class="mt-top-right">
					<view class="phone">{{userInfo}}</view>
					<view class="my-top-name">会员名: User302</view>
				</view>
			</view>
			<view class="my-nav">
				<view class="my-nav-box">
					<view class="my-nav-count">6</view>
					<view class="my-nav-text">优惠券</view>
				</view>
				<view class="my-nav-box">
					<view class="my-nav-count">99.00</view>
					<view class="my-nav-text">账户</view>
				</view>
				<view class="my-nav-box">
					<view class="my-nav-count">1</view>
					<view class="my-nav-text">服务包/电子券</view>
				</view>
				<view class="my-nav-box">
					<view class="my-nav-count">82</view>
					<view class="my-nav-text">足迹</view>
				</view>
			</view>
		</view>
		<view class="my-dingdan">
			<view class="my-dingdan-left">我的订单</view>
			<view class="my-dingdan-left my-dingdan-right"><text class="min">查看全部 </text> ></view>
		</view>
		<view class="my-caidan-box">
			<view class="my-caidan">
				<view class="icon"> <image src="../../../static/my1.png" mode=""></image> </view>
				<view class="my-caidan-text">待付款</view>
			</view>
			<view class="my-caidan">
				<view class="icon"><image src="../../../static/my2.png" mode=""></image> </view>
				<view class="my-caidan-text">代发货</view>
			</view>
			<view class="my-caidan">
				<view class="icon"><image src="../../../static/my3.png" mode=""></image></view>
				<view class="my-caidan-text">待收货</view>
			</view>
			<view class="my-caidan">
				<view class="icon"><image src="../../../static/my4.png" mode=""></image></view>
				<view class="my-caidan-text">待评价</view>
			</view>
		</view>
		<view class="my-button" @click="handerclick">退出登录</view>
	</view>
</template>

<script>
	import vuex from 'vuex'
	import {mapState,mapMutations}from 'vuex'
	export default {
		computed:{
			...mapState(['userInfo'])					//使用辅助函数获取vux中的state的数据
		},
		data() {
			return {
				phonelist:0,
			}
		},
		methods: {
			...mapMutations(['logout']),				//获取vuex中的mutation方法 映射到methods中
			handerclick(){
				this.logout()							//调用方法
				uni.navigateTo({						//跳转页面
					url:'/pages/landing/landing'
				})
			}
		},
		mounted() {
			
		// this.phonelist=	uni.getStorageSync("phone")//本地存储
		//this.phonelist= this.$store.state.userInfo
		 // console.log(this.userInfo)
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		.my-top-box {
			background-color: rgb(214, 245, 255);
			height: 169px;

			.my-top {
				display: flex;
				padding: 25px 0 10px 0;
				box-sizing: border-box;
				.img {
					width: 48px;
					height: 48px;
					border-radius: 50%;
					margin: 0 10px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.my-top-name {
					font-size: 15px;
					color: rgb(190, 178, 153);
					margin-top: 5px;
				}

				
			}
			.my-nav {
				display: flex;
				margin-top: 15px;
				.my-nav-box {
					width: 25%;
					text-align: center;
					line-height: 25px;
					font-size: 14px;
					.my-nav-text{
						color: rgb(153,153,153);
					}
				}
			}
			
		}
		.my-dingdan{
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			.my-dingdan-left{
				width: 50%;
			}
			.my-dingdan-right{
				text-align: right;
				.min{
					color: rgb(153,153,153);
				}
			}
		}
		.my-caidan-box{
			display: flex;
			.my-caidan{
				// line-height: 40px;
				width: 25%;
				text-align: center;
				.icon{
					margin: auto;
					margin-top: 20px;
					margin-bottom: 20px;
					width: 28px;
					height: 28px;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.my-caidan-text{
					font-size: 14px;
					color: rgb(153,153,153);
				}
			}
		}
		.my-button{
			width: 250px;
			height: 40px;
			background-color: rgb(8,175,254);
			border-radius: 25px;
			color: white;
			text-align: center;
			line-height: 40px;
			margin: auto;
			margin-top: 100px;
		}
	}
</style>
